<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="提现时间：">
                <a-range-picker style="width: 80%" @change="onChange"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="状态：">
                <a-select allowClear placeholder="提现状态" style="width: 80%" v-model="queryParam.status">
                  <a-select-option :value="1">提现成功</a-select-option>
                  <a-select-option :value="2">提现失败</a-select-option>
                  <a-select-option :value="3">提现中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="入账状态：">
                <a-select allowClear placeholder="请选择入账状态" style="width: 80%">
                  <a-select-option value="1">入账中</a-select-option>
                  <a-select-option value="2">入账成功</a-select-option>
                  <a-select-option value="2">入账失败</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
          </a-row>
        </a-form>
      </div>
      <!-- <a style="cursor: pointer" v-if="advanced" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor: pointer" v-if="!advanced" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a> -->
      <div style="padding: 5px 0">
        <a-button @click="handleexportfile">导出</a-button>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        style="margin-top: 10px"
        class="user_management_table"
        :pagination="pagination"
      >
        <span slot="actual_entry" slot-scope="text,record">
          {{(record.withdrawal_amount-record.service_charge).toFixed(2)}}
        </span>
        <span slot="status" slot-scope="text,record">
           <span v-if="record.status==1">提现成功</span>
           <span v-if="record.status==2">提现失败</span>
           <span v-if="record.status==3">提现中</span>
        </span>
        <span slot="user" slot-scope="text,record">
          {{record.user||'-'}}
        </span>
      </s-table>
    </a-card>
  </div>
</template>

<script>
import { withdrawalList,withdrawalExport } from '@/api/schoolWallet'
import { STable } from '@/components'
export default {
  components:{STable},
  watch:{
    queryParam: {
      handler (newName, oldName) {
        this.$refs.table.refresh()
      },
      // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true // 开启深度监听，默认是false
    },
  },
  data() {
    return {
      pagination: {
        showTotal: (total) => `共${total}条数据`,
        },
     columns: [
          {
            title: '提现时间',
            dataIndex: 'created_at',
            // scopedSlots: { customRender: 'created_at' },
            width:200
          },
          {
            title: '提现金额',
            dataIndex: 'withdrawal_amount',
            // scopedSlots: { customRender: 'created_at' },
            width:110
          },
          {
            title: '手续费',
            dataIndex: 'service_charge',
            // scopedSlots: { customRender: 'created_at' },
            width:110
          },
          {
            title: '实际入账金额',
            // dataIndex: 'created_at',
            scopedSlots: { customRender: 'actual_entry' },
            width:110
          },
          {
            title: '状态',
            // dataIndex: 'created_at',
            scopedSlots: { customRender: 'status' },
            width:110
          },
          {
            title: '操作人',
            dataIndex: 'user',
            scopedSlots: { customRender: 'user' },
            width:110
          },
          // {
          //   title: '手机号',
          //   dataIndex: 'phone',
          //   // scopedSlots: { customRender: 'created_at' },
          //   width:110
          // },
          // {
          //   title: '商品说明',
          //   dataIndex: 'explain',
          //   // scopedSlots: { customRender: 'created_at' },
          //   width:200,
          //   ellipsis:true
          // },
          // {
          //   title: '备注',
          //   // dataIndex: 'created_at',
          //   // scopedSlots: { customRender: 'created_at' },
          //   width:110
          // },
          {
            title: '提现流水号',
            dataIndex: 'serial_number',
            // scopedSlots: { customRender: 'created_at' },
            width:200
          },
        ],
        student_name: '',
        queryParam: {
          school_id: this.$store.state.user.school,
          status:undefined
        },
        loadData: (parameter) => {
        return withdrawalList(
          Object.assign(parameter, this.queryParam, 
          { 
            start_time:this.start_time,
            end_time:this.end_time
          }
        )).then(
          (res) => {
            return res
          }
        )
      },
      start_time:'',
      end_time:''
    }
  },
  methods: {
    handleexportfile() {
      withdrawalExport(
        Object.assign(this.queryParam,{
        start_time: this.start_time||undefined,
        end_time: this.end_time||undefined,
      })
        ).then((res) => {
          this.$message.success('导出成功')
          window.location.href = res.url.url + res.url.path
      }).catch(err=>{
        this.$message.error(err.data.message||'导出失败')
      })
    },
    onChange(date, dateString){
      this.start_time=dateString[0]
      this.end_time=dateString[1]
      this.$refs.table.refresh(true)
      console.log(date, dateString);
    }
    // more() {
    //   console.log(11);
    //   this.advanced = !this.advanced
    // },
  },
}
</script>

<style lang="less" scoped>
#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}
</style>